import React from 'react';
import { TabBar } from 'antd-mobile';
import Icon from '@ant-design/icons';
import { history, lazy } from 'router';
import { RouteChildrenProps } from 'react-router-dom';
import style from './style.module.scss';

import { ReactComponent as commodity } from './icons/commodity.svg';
import { ReactComponent as shoppingCart } from './icons/shoppingCart.svg';
import { ReactComponent as user } from './icons/user.svg';

const Commodity = lazy(() => import('page/Commodity'));
const User = lazy(() => import('page/User'));
const ShoppingCart = lazy(() => import('page/ShoppingCart'));

const onPressTabBar = (key: string) => () => {
    history.push(`/workbench/${key}`)
}

const tabBarConfig = [
    { title: '商品', key: 'commodity', ico: commodity, component: Commodity },
    { title: '购物车', key: 'shoppingCart', ico: shoppingCart, component: ShoppingCart },
    { title: '我', key: 'user', ico: user, component: User },
]

export default (props: RouteChildrenProps<{ key?: string }>) => {

    const key = props.match?.params?.key || 'commodity';

    return (
        <div className={style.body}>
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
            >
                {
                    tabBarConfig.map(e => {
                        return (
                            <TabBar.Item
                                onPress={onPressTabBar(e.key)}
                                selected={key === e.key}
                                icon={<Icon component={e.ico} />}
                                selectedIcon={<Icon component={e.ico} />}
                                title={e.title}
                                key={e.key}
                            >
                                {(e.component && key===e.key) ? <e.component /> : ``}
                            </TabBar.Item>
                        )
                    })
                }
            </TabBar>
        </div>
    )
}